<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>ZBUS Admin Console</title>
<script type="text/javascript" src="?sub_cmd=jquery"></script>
<style>
table {
  font-family: "Helvetica Neue", Helvetica, sans-serif
}
caption {
  text-align: left;
  color: silver;
  font-weight: bold;
  text-transform: uppercase;
  padding: 5px;
}

thead {
  background: SteelBlue;
  color: white;
}
th,
td {
  padding: 5px 10px;
}

tbody tr:nth-child(even) {
  background: WhiteSmoke;
}

tbody tr td:nth-child(2) {
  text-align:center;
}

tbody tr td:nth-child(3),
tbody tr td:nth-child(4) {
  text-align: right;
  font-family: monospace;
}

tfoot {
  background: SeaGreen;
  color: white;
  text-align: right;
}

tfoot tr th:last-child {
  font-family: monospace;
}

#slogan {
text-align: center; 
font:bold 24px arial,sans-serif; 
margin: 30px 30px;
}

</style>
</head>
<body> 
<h2 id="slogan" align="center">
ZBUS = MQ + PubSub + RPC + PROXY  <label id="broker" style="color: orange;" ></label>
</h2>

<script type="text/javascript">
Date.prototype.Format = function (fmt) { //author: meizz 
    var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "h+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        "S": this.getMilliseconds() //毫秒 
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}
function timeConverter(unixTime){ 
	var d = new Date(unixTime);
	return d.Format("yyyy-MM-dd hh:mm:ss"); 
	//return d.getFullYear()+"/"+(d.getMonth()+1)+"/"+d.getDate()+" "+d.getHours()+":"+d.getMinutes();
}

$(document).ready(function(){
var MODE_MQ = 1;
var MODE_PUBSUB = 2; 
var MODE_TEMP = 4;

$.getJSON('?sub_cmd=data',function(data){ 
    $("#broker").html(data.broker); 
     
    $.each(data.mqTable, function(key, mq){  
    	if(key=='@type') return;
    	if((mq.mode & MODE_MQ) == 0) return;
    	
        $("#mq_table").append(
			"<tr>\
				<td>"+ mq.name +"</td>\
				<td style='text-align:left;'>MQ</td>\
				<td>"+ mq.consumerInfoList.length +"</td>\
				<td>"+ mq.unconsumedMsgCount +"</td>\
				<td>"+ timeConverter(mq.lastUpdateTime) +" </td>\
				<td>"+ mq.creator +" </td>\
				<td><a href=''>Empty</a></td>\
			</tr>"
		);
    }); 
    $.each(data.mqTable, function(key, mq){  
    	if(key=='@type') return;
    	if((mq.mode & MODE_PUBSUB) == 0) return; 
        $("#mq_table").append(
			"<tr>\
				<td>"+ mq.name +"</td>\
				<td style='text-align:left;'>PubSub</td>\
				<td>"+ mq.consumerInfoList.length +"</td>\
				<td>"+ mq.unconsumedMsgCount +"</td>\
				<td>"+ timeConverter(mq.lastUpdateTime) +" </td>\
				<td>"+ mq.creator +" </td>\
				<td><a href=''>Empty</a></td>\
			</tr>"
		);
    }); 
}); 

});
</script> 

<div align="center">
<table>
	<thead>
	<tr>
	<th>MQ</th>
	<th>Mode</th>
	<th>Consumers</th>
	<th>MessageInQueue</th> 
	<th>LastUpdated</th> 
	<th>Creator</th> 
	<th>Operation</th>
	</tr>
	</thead>

<tbody id="mq_table"> 

</tbody>

</table> 
</div>	
</body>

</html>
